<template>
    <view class="pay-res page">
        <mx-navbar :isClearFixed="true" title="悟空商城" />

        <view class="content" v-if="type">
            <view class="t1">
                <text class="cuIcon cuIcon-roundcheckfill" v-if="type == 'succ'"></text>
                <text class="cuIcon cuIcon-roundclosefill" v-if="type == 'error'"></text>
            </view>
            <view class="t2">
                <view class="sn">订单号：{{ sn }}</view>
                <view class="t2tip" v-if="type == 'succ'">
                    恭喜您，支付成功！
                </view>
                <view class="t2tip" v-else>
                    支付失败
                </view>
            </view>

            <view class="btn-group">
                <button class="cu-btn round line-red" @click="$go(`/pages-order/detail/detail?sn=${sn}`)" v-if="type == 'succ'">查看订单</button>
                <button class="cu-btn round bg-red" @click="$go(`/pages/tabs/index/index`)" >再去逛逛</button>
                <button class="cu-btn round bg-red" v-if="type == 'error'" @click="orderPay(sn)">继续支付</button>
            </view>
        </view>
    </view>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const sn = ref('')
const type = ref('')
const info = ref({})
const is_status = ref(-1)
onLoad((options)=> {
    sn.value = options.sn || ''
    type.value = options.type 
    if(type.value == 'succ') {
        getData()
    }
})

onShow(()=> {
    
})

async function getData() {
    let res = await proxy.$api('OrderPayQuery', {
		order_sn: sn.value
	}, false, false)
    if(res.code == 0) {
        info.value = res.data || {}
        if(info.value.state == 2) {
            type.value = 'succ'
        }
    }
}

async function orderPay(sn) {
	let res = await proxy.$api("OrderPay", {
		order_sn: sn
	});
	if (res.code === 0) {
		proxy.$tools.pay(res.data).then(async _ => {
            type.value = 'succ'
			getData()
		}).catch(_ => {
			return
		})
	}
}

</script>

<style lang="scss" scoped>
.page{
    min-height: 100vh;
    background-color: #fff;
}
    .t1{
        text-align: center;
        padding: 120rpx 0 80rpx;
        .cuIcon{
            font-size: 104rpx;
        }
        .cuIcon-roundcheckfill{
            color: #4fa537;
        }
        .cuIcon-roundclosefill{
            color: #f00;
        }
    }
    .t2{
        text-align: center;
        .t2tip{
            font-size: 28rpx;
            font-weight: bold;
        }
        .sn{
            font-size: 24rpx;
            color: #000;
            margin-bottom: 20rpx;
        }
    }
    .t3{
        padding: 30rpx;
        margin-top: 0rpx;
        .t3body{
            width: 100%;
            padding: 30rpx;
            border: 1px solid #ececec;
            border-radius: 10rpx;
            color: #000;
            font-size: 24rpx;
            .t3m{
                
                margin-top: 30rpx;
            }
            .t3r{
                color: #4fa537;
            }
        }
        
    }
    .btn-group{
        margin-top: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .cu-btn{
            min-width: 240rpx;
            height: 80rpx;
            margin: 0 20rpx;
        }
        .lines-red{
            color: $main_color !important;
            border-color: $main_color !important;
        }
        .bg-red{
            background-color: $main_color !important;
        }
    }

    .cl-btn{
        font-size: 20rpx;
        background-color: $main_color;
        color: #fff;
        margin-left: 30rpx;
    }
</style>